<div class="filter-content">
    <div class="filter">
        <div class="filter-title">中奖查询</div>
        <div class="f1">
            请选择彩种：
        </div>
        <div class="f2" style="width:140px;">
            <select data-am-selected>
            </select>
        </div>

        <div class="f3" style="margin-left: 30px;">
            期数：
        </div>
        <div class="f4" style="width: 140px;">
            <input type="text" placeholder="请输入查询的期数" class="am-form-field" required/>
        </div>

        <div class="f5" style="margin-left: 30px;">
            <button class="am-btn btn">查看</button>
        </div>
        <div class="clear"></div>
    </div>

    <div style="float: left;">
        <div class="issue-result">
            <span class="game">--</span> <span class="issue"> -- 期</span>
        </div>
        <div class="result">
            <div class="item">01</div><div class="item">09</div>
        </div>
    </div>
    <div class="item-total">
        <div class="t">总投注</div>
        <div class="v total">0.00</div>
    </div>
    <div class="sep2"></div>
    <div class="item-total">
        <div class="t">输赢</div>
        <div class="v profit">0.00</div>
    </div>
    <div class="clear"></div>
</div>


<div class="detail_title">明细</div>
<div style="margin-right: 10px;">
<table class="am-table am-table-bordered am-table-striped am-table-compact am-table-hover am-table-centered" id="detail">
  <thead>
  <tr>
    <th>时间</th>
    <th>玩法</th>
    <th>下注金额</th>
    <th>退水</th>
    <th>结果</th>
  </tr>
  </thead>
  <tbody>
  </tbody>
</table>
</div>

<style type="text/css">
.filter {
    border-bottom: 1px solid black;
    padding-bottom: 5px;
}
.item-total {
    float: left;
    text-align: center;
    font-size: 16px;
    margin-left: 40px;
    margin-top: 10px;
}
.item-total .t {
    line-height: 16px;
}
.item-total .v {
    font-size: 28px;
    color: red;
}
.sep2 {
    float: left;
    width: 50px;
    height: 40px;
    margin-top: 14px;
    border-right: 1px solid #585858;
}

.issue-result {
    text-align: left;
    font-size: 16px;
}
.game {
    font-size: 20px;
    color: #0a0a0a;
}
.result {
    background-color: #585858;
    padding: 6px 4px 6px 6px;
    min-width: 100px;
    min-height: 30px;
}
.result .item {
    float: left;
    width: 20px;
    height: 32px;
    line-height: 32px;
    margin-right: 10px;
    text-align: center;
    color: red;
    font-size: 14px;
    background-image: url("images/num_bg.png");
}

.detail_title {
    padding: 20px 0 4px 0px;
}
</style>

<script>
    // 填充游戏列表
    var e = $(".filter select");
    var arr = get_game_list();
    for (var i in arr) {
        var line = '<option value="__v__">__name__</option>';
        line = line.replace(/__v__/, arr[i]);
        line = line.replace(/__name__/, get_game_display_name(arr[i]));
        e.append(line);
    }

    var currGame = urlInfo.params.game;
    var issue = urlInfo.params.issue;
    var betTotal = 0, betProfit = 0;
    var nums = [];
    var details = [];

    function refresh_data() {
        e.val(currGame);
        e.trigger("changed.selected.amui");

        $(".game").html(get_game_display_name(currGame));
        $(".f4 input").val(issue);
        if (issue)
            $(".issue").html(" <span class='red'>" + issue + "</span> 期");
        else
            $(".issue").html(" <span class='red'>--</span> 期");
        $(".total").html(betTotal/100);
        if (betProfit >= 0)
            $(".profit").html(betProfit/100);
        else
            $(".profit").html("<span class='green'>" + betProfit/100 + "</span>");

        // 开奖结果
        var div = $(".result");
        div.empty();
        for (var i in nums) {
            div.append("<div class='item'>" + nums[i] + "</div>");
        }
        div.append("<div class='clear'></div>");

        var table = $("#detail tbody");
        table.empty();
        for (var i in details) {
            var o = details[i];
            var tr = $("<tr></tr>");
            var target = Util.convertTarget(o.type, o.target);
            tr.append("<td>" + new Date(o.time).Format("yyyy-MM-dd HH:mm") + "</td>");
            tr.append("<td><span class='blue'>" + target + "</span>@<span class='gray'>" + o.rate + "</span></td>");
            tr.append("<td class='red'>" + (o.amount / 100) + "</td>");
            tr.append("<td>0%</td>");
            if (o.profit >= 0)
                tr.append("<td class='red'>" + o.profit/100 + "</td>");
            else
                tr.append("<td class='green'>" + o.profit/100 + "</td>");
            table.append(tr);
        }
    }
    refresh_data();

    // 获取开奖结果
    function refresh_issue(type, issue) {
        startLoading();
        CMD.lottery_data(type, issue, function(r) {
            nums = data.red;
            refresh_data();
        });
    }

    // 输赢结果
    function request_data() {
        refresh_issue(currGame, issue);

        Result.switchGame(currGame);
        Result.profit(issue, function(r) {
            betTotal = r.amount;
            betProfit = r.profit;
            refresh_data();

            if (betTotal > 0) {
                // 明细列表
                Lottery.switchGame(currGame);
                Lottery.today(function(list) {
                    console.log("明细", list);
                    details = [];
                    for (var i in list) {
                        if (list[i].type == currGame && list[i].issue == issue)
                            details.push(list[i]);
                        refresh_data();
                    }
                });
            }
        });
    }
    
    $(".btn").click(function() {
        var game2 = e.val();
        var issue2 = $(".filter .f4 input").val().trim();
        if (issue2 == '') return;
        currGame = game2;
        issue = issue2;
        nums = [];
        details = [];

        refresh_data();
        request_data();
    });
    request_data();
</script>
